<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont" @tap="backPage">&#xe779;</view>
			<view class="text">订单详情</view>
		</view>
		<view class="clear_box"></view>
		
		<view class="address_box">
			<view class="icon iconfont">&#xe638;</view>
			<view class="text_box">
				<view class="name_box">
					<view class="name">{{info.receive_name}}</view>
					<view class="phone">{{info.receive_tel}}</view>
				</view>
				<view class="address">{{info.receive_area}}{{info.receive_address}}</view>
			</view>
		</view>
		
		<block v-for="(item, index) in info.order_goods" :key="'goods' + index">
			<view class="content">	
				<view class="goods_box">
					<image class="goods_img" :src="item.goods_image" mode="scaleToFill"></image>
					<view class="text_box">
						<view class="title">{{ item.goods_name }}</view>
						<view class="show">
							<view class="money_box">
								￥{{ item.goods_price }}
							</view>
							<view class="menu">x{{item.buy_num}}</view>
						</view>
					</view>
				</view>		
			</view>
		</block>
		
		<view class="address_list">
			<view class="title">运费</view>
			<view class="text" v-if="info.freight_money == 0">包邮</view>
			<view class="text" v-if="info.freight_money > 0">￥{{info.freight_money}}</view>
		</view>
		
		<!-- <view class="address_list" v-if="info.packaging_fee > 0">
			<view class="title">包装费</view>
			<view class="text">￥{{info.packaging_fee}}</view>
		</view> -->
		
		<view class="address_list" v-if="info.full_dec_money > 0">
			<view class="title">满减</view>
			<view class="text">-￥{{info.full_dec_money}}</view>
		</view>
		
		<!-- <view class="address_list" v-if="info.coupon_money > 0">
			<view class="title">优惠券</view>
			<view class="text">-￥{{info.coupon_money}}</view>
		</view> -->
		
		<!-- <view class="address_list" v-if="info.plat_coupon_money > 0">
			<view class="title">集合会员劵</view>
			<view class="text">-￥{{info.plat_coupon_money}}</view>
		</view> -->
		
		
		
		<view class="address_list">
			<view class="title">订单备注</view>
			<view class="remarks">{{info.remarks}}</view>
		</view>
		
		<!-- <view class="payment_box">
			<view class="payment_title">选择支付方式</view>
	
			<view class="payment_list" :data-index="0" @tap="setTick">
				<view class="icon iconfont paymentIcon01">&#xe629;</view>
				<view class="title">支付宝</view>
				<view class="text"></view>
				<view class="tick iconfont" :class="select == 0 ? 'tickColor' : ''">&#xe604;</view>
			</view>
			
			
			
			<view class="payment_list" :data-index="1" @tap="setTick">
				<view class="icon iconfont paymentIcon02">&#xe606;</view>
				<view class="title">微信付款</view>
				<view class="text"></view>
				<view class="tick iconfont" :class="select == 1 ? 'tickColor' : ''">&#xe604;</view>
			</view>
			<view class="payment_list" :data-index="2" @tap="setTick">
				<view class="icon iconfont paymentIcon03">&#xe603;</view>
				<view class="title">积分支付</view>
				<view class="text"></view>
				<view class="tick iconfont" :class="select == 2 ? 'tickColor' : ''">&#xe604;</view>
			</view>
		</view> -->
		
		<view class="footer">
			<!-- <view class="rule">此商品为活动特价商品，非质量问题暂不支持退换货！</view> -->
			<view class="menu_box">
				<view class="menu">实付款：<view class="m">￥{{info.total_price}}</view></view>
				<view class="menu" @tap="noTimeGo">确认并支付</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			storeId:'',
			info:'',
			show_box:false,
			select:0,
			goods: [],
			remarks:'',
			payType:'alipay',
			info: '',
			orderId: 0,
		};
	},
	onLoad(e) {
		let that = this;
		that.orderId = e.id;
		that.loadData();
	},
	
	methods: {
		noTimeGo(){
			let that = this;
			if(that.info.shipping_type == 1){
				uni.showModal({
					title: '提示',
					content: '本区域服务时段为' + that.info.online_time + '，当前不在服务时段，由商家自配送，请及时与商家联系',
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							//console.log('用户点击确定');						
							that.autoShowBox()
						} else if (res.cancel) {
							//console.log('用户点击取消');
							
						}
					}
				});
			}else{
				that.autoShowBox();
			}
		},
		autoShowBox(){
			let that = this;
			
			let orderId = that.orderId;
			// #ifdef APP-PLUS
			that.Net._post('user/order/pay',{order_id:orderId,payment_name:that.payType,device:'app',pay_password:'',}, rex => {
				if(rex.code == 200){
					let orderData = rex.data;
					uni.requestPayment({
						provider: that.payType,
						orderInfo: orderData, //微信、支付宝订单数据
						success: function(res) {
							uni.showToast({
								title: '订单购买成功',
								duration: 2000,
								icon:'none'
							});
							setTimeout(function() {
								uni.navigateBack({});
							}, 2000);
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							setTimeout(function() {
								uni.navigateBack({});
							}, 2000);
						}
					});
				}
			});
			// #endif
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					let code = loginRes.code;
					console.log(code);
					that.Net._post('user/order/pay', { order_id: orderId, payment_name: 'wxpay', device: 'mini', pay_password: '',code: code}, rex => {
						if (rex.code == 200) {
							//console.log(rex.data)
							let orderData = rex.data;
					
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp:orderData.timeStamp,
								nonceStr: orderData.nonceStr,
								package: orderData.package,
								signType: orderData.signType,
								paySign: orderData.paySign,
								success: function(res) {
									// uni.showToast({
									//     title: '订单购买成功',
									//     duration: 2000,
									// 		icon:'none'
									// });
									uni.showModal({
										title: '提示',
										content: '订单购买成功',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												//console.log('用户点击确定');
												setTimeout(function() {
													uni.navigateBack({});
												}, 2000);
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									setTimeout(function() {
										uni.navigateBack({});
									}, 2000);
								}
							});
						}
					});
				}
			});
			// #endif
			
		},
		loadData() {
			let that = this;
			that.Net._get('user/order/'+that.orderId,{}, res => {
				if(res.code == 200){
					that.info = res.data;
				}
			});
		},
		
		backPage() {
			uni.navigateBack({});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		setTick(e) {
			let that = this;
			let index = e.currentTarget.dataset.index;
			this.select = index;
			if(index == 0){
				that.payType = 'alipay'
			}else if(index == 1){
				that.payType = 'wxpay'
			}else if(index == 2){
				that.payType = 'balance'
			}
		},
		
	}
};
</script>

<style>
	page{
		padding-top: 3%;
		padding-bottom: 25vw !important;
	}
	.address_box{
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 5vw 4%;
	}
	
	.address_box .icon{
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		font-size: 5vw;
		color: #fff;
		background-color: #FF7F22;
		margin-right: 3vw;
	}
	
	.address_box .text_box{
		flex: 1;
	}
	
	.address_box .text_box .name_box{
		width: 100%;
		display: flex;
	}
	
	.address_box .text_box .name_box .name{
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		line-height: 6vw;
	}
	
	.address_box .text_box .name_box .phone{
		font-size: 3.5vw;
		color: #999;
		line-height: 6vw;
		margin-left: 3vw;
	}
	
	.address_box .text_box .address{
		font-size: 3.4vw;
		color: #666;
		line-height: 5vw;
		margin-top: 1.5vw;
	}
	
	.address_box .text_box .add_box{
		display: flex;
		margin-top: 3vw;
	}
	
	.address_box .text_box .add_box .text{
		font-size: 3.5vw;
		color: #666;
		line-height: 6vw;
		flex: 1;
	}
	
	.address_box .text_box .add_box .arrow{
		font-size: 4vw;
		color: #999;
		line-height: 6vw;
		flex: 1;
		text-align: right;
	}
	
	.content {
		width: 100%;
		margin: 0 auto;
		background: #fff;
		border-radius: 1.5vw;
		margin: 3% 0;
		padding: 3vw 4%;
	}
	
	.content .goods_box {
		width: 100%;
		display: flex;
	}
	
	.content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin: 0 3vw;
	}
	
	.content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}
	
	.content .goods_box .text_box .title {
		height: 11vw;
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.content .goods_box .text_box .show {
		width: calc(100%);
		display: flex;
		position: relative;
		margin-top: 6vw;
	}
	
	.content .goods_box .text_box .show .money_box {
		width: 65%;
		display: flex;
		justify-content: flex-start;
		font-size: 4vw;
		color: #333333;
		line-height: 6vw;
		font-weight: bold;
	}
	
	.content .goods_box .text_box .show .money_box .no_money {
		color: #999;
		line-height: 6vw;
		position: relative;
		font-size: 3.5vw;
		margin-left: 0.5vw;
		font-weight: 500;
		margin-left: 1.5vw;
	}
	
	.content .goods_box .text_box .show .money_box .no_money .line {
		width: 100%;
		height: 1px;
		background-color: #999;
		position: absolute;
		top: calc(50% - 0vw);
		left: 0;
	}
	
	.content .goods_box .text_box .show .menu{
		line-height: 5vw;
		color: #999;
		font-size: 3.5vw;
		position: absolute;
		right: 0vw;
	}
	
	.address_list{
		width: 100%;
		background-color: #fff;
		padding: 0 4%;
		display: flex;

	}
	
	.address_list .title{
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #333;
	}
	
	.address_list .text{
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}
	
	.address_list .money{
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #333333;
		text-align: right;
		font-weight: bold;
	}
	
	.address_list input{
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}
	
	.address_list .coupon{
		color: #333333;
	}
	
	.payment_box{
		width: 100%;
		background-color: #fff;
		padding: 0 4%;
		margin-top: 3%;
	}
	
	.payment_box .payment_title{
		font-size: 3.5vw;
		color: #333;
		line-height: 10vw;
		height: 10vw;
	}
	
	.payment_box .payment_list{
		width: 100%;
		display: flex;
	}
	
	.payment_box .payment_list .icon{
		width: 10vw;
		line-height: 12vw;
		text-align: center;
		font-size: 8vw;
		margin-right: 3vw;
	}
	
	.payment_box .payment_list .title{
		width: 15vw;
		line-height: 12vw;
		text-align: left;
		font-size: 3.5vw;
		margin-right: 3vw;
		color: #333;
	}
	
	.payment_box .payment_list .text{
		flex: 1;
		line-height: 12vw;
		text-align: left;
		font-size: 3.5vw;
		color: #999;
	}
	
	.payment_box .payment_list .tick{
		width: 6vw;
		line-height: 6vw;
		text-align: center;
		font-size: 5vw;
		margin-top: 3vw;
		color: #e8e8e8;
	}
	
	.paymentIcon01{
		font-size: 8vw !important;
		color: #01aaef;
	}
	
	.paymentIcon02{
		font-size: 7.5vw !important;
		color: #3dcc32;
	}
	
	.paymentIcon03{
		font-size: 7.5vw !important;
		color: #fec248;
	}
	
	.tickColor{
		color: #FF7F22 !important;
	}
	
	.footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}
	
	.footer .rule{
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		font-size: 3vw;
		color: #FF7F22;
		text-align: center;
		background-color: #f5fbfd;
	}
	
	.footer .menu_box{
		width: 100%;
		display: flex;
	}
	
	.footer .menu_box .menu{
		width: 50%;
		height: 13.5vw;
		line-height: 13.5vw;
		display: flex;
		justify-content: center;
		font-size: 4vw;
	}
	
	.footer .menu_box .menu .m{
		font-size: 4.5vw;
		font-weight: bold;
		color: #333333;
	}
	
	.footer .menu_box .menu:nth-child(1){
		background-color: #fff;
		color: #333;
	}
	
	.footer .menu_box .menu:nth-child(2){
		background-color: #FF7F22;
		color: #fff;
	}
	
	.show_box{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	
	.show_box .pupu_box{
		width: 70%;
		background-color: #fff;
		position: absolute;
		left: calc(50% - 35%);
		top: 35%;
		border-radius: 3vw;
		padding: 7vw;
	}
	
	.show_box .pupu_box .title{
		font-size: 4vw;
		color: #333;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}
	
	.show_box .pupu_box .rule{
		font-size: 3.5vw;
		color: #333;
		width: 100%;
		text-align: center;
		line-height: 5vw;
		margin-top: 4vw;
	}
	
	.show_box .pupu_box .rule span{
		color: #FF7F22 !important;
	}
	
	.show_box .pupu_box .menu_box{
		width: 100%;
		display: flex;
		margin-top: 6vw;
	}
	
	.show_box .pupu_box .menu_box .menu{
		width: 45%;
		height: 10.5vw;
		line-height: 10.5vw;
		text-align: center;
		font-size: 4vw;
		border-radius: 10.5vw;
		box-sizing: border-box;
	}
	
	.show_box .pupu_box .menu_box .menu:nth-child(1){
		margin-right: 10%;
		border: 1px solid #F0F0F0;
		color: #FF7F22;
	}
	
	.show_box .pupu_box .menu_box .menu:nth-child(2){
		background-color: #FF7F22;
		color: #fff;
	}




</style>
